<template>
  <el-row justify="space-between" :gutter="20">
    <div style="margin:5px 10px;width:100%;box-shadow: 2px 2px 2px #c4c3c3;background-color: #eeeeee;height: 40px;align-items: center;display: flex;align-content: center">
      <div style="font-size: 20px;font-weight: bold;margin: 5px;display: inline-flex;align-items: center">
        <svg class="icon" style="margin-right: 10px;width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1503"><path d="M384 16.128v133.7216C234.8544 202.5664 128 344.8064 128 512c0 212.0768 171.9232 384 384 384 167.1936 0 309.44-106.8544 362.1504-256h133.7216c-56.8384 220.832-257.2992 384-495.872 384-282.7712 0-512-229.2288-512-512C0 273.4272 163.168 72.9664 384 16.128zM512 0c282.7712 0 512 229.2288 512 512H512V0z" fill="#4A4A4A" p-id="1504"></path></svg>
        Target gene prediction by 3D
      </div>
    </div>
    <el-col :span="12">
      <el-form
          :model="form"
          label-width="auto"
          :label-position="'top'"
          style="color: black;max-width: 600px;padding-left: 20px;font-weight: bolder;font-size: 15px;margin-top: 20px">
        <el-form-item>
<!--          单选按钮-->
          <el-radio-group style="" v-model="inputselect">
            <el-radio value="0" size="large">
              <el-form-item label="SNV">
                <div v-if="inputselect=='0'" style="position: absolute;top:-30px;left:40px">
                  <el-tooltip
                      class="box-item"
                      effect="light"
                      :content="'<p style=\'width: 400px;\'>Notes*: If the SNV site is an SNP, please enter the dbSNP format ID; otherwise, please input the chromosomal position of the SNV, e.g., chr1:793879</p>'"
                      raw-content
                      placement="top"
                  >
                    <el-icon style="color: #107fe7;font-size: 20px"><QuestionFilled /></el-icon>
                  </el-tooltip>
                </div>
              </el-form-item>
            </el-radio>
            <el-radio value="1" size="large">
              <el-form-item label="Chromosomal region(hg38)" style="position:relative">
                <div v-if="inputselect=='1'" style="position: absolute;top:-30px;left:180px">
                  <el-tooltip
                      class="box-item"
                      effect="light"
                      :content="'<p style=\'width: 400px;\'>Input some chromosomal regions ofinterest to obtain all ASM sites amongthem.Please ensure that the inpucontentis separated byspaces oltabs.The input is limited to a maximumof 1000 lines.</p>'"
                      raw-content
                      placement="top"
                  >
                    <el-icon style="color: #107fe7;font-size: 20px"><QuestionFilled /></el-icon>
                  </el-tooltip>
                </div>
              </el-form-item>
            </el-radio>
          </el-radio-group>
          <el-form-item v-if="inputselect=='1'" style="font-weight: bold;font-size: 15px;padding-left: 20px">
            <div style="display: flex;justify-content: space-between;">
              <el-input
                  v-model="form.chromosomal_regions.data"
                  style="width: 400px;height: 200px"
                  :rows="3"
                  type="textarea"
                  placeholder="Input chromatin regions (space-delimited), eg：
chr11 65239110 65264640
chr19 13947194 13962421
chr19 39888494 39901409
chr1 30649567 30655759
chr1 11345200 11359618"
              />
              <!--              <div>&nbsp;&nbsp;&nbsp;</div>-->
              <!--              <div style="font-weight: normal;color: gray;text-align: justify;width: 300px;line-height: 15px">-->
              <!--                -->
              <!--              </div>-->
            </div>
          </el-form-item>
          <el-form-item v-if="inputselect=='0'" style="font-weight: bold;font-size: 15px;padding-left: 20px">
            <div style="display: flex;justify-content: space-between;">
              <el-input
                  v-model="form.SNV.data"
                  style="width: 400px;height: 200px"
                  :rows="3"
                  type="textarea"
                  placeholder="eg:
rs72844678
"
              />
            </div>
          </el-form-item>
        </el-form-item>

        <el-form-item label="Tissue">
          <el-select v-model="form.tissue"
                     collapse-tags
                     collapse-tags-tooltip
                     :max-collapse-tags="5"
                     style="width: 800px"><!--multiple placeholder="Select" -->
            <el-option
                v-for="item in tissueOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <div style="display: flex;align-items: center;margin-bottom: 20px">
          <el-checkbox-group v-model="form.distal_regulation.option">
            <el-checkbox label="Distal regulation" style="font-size: 18px;font-weight: bolder" value="true"/>
          </el-checkbox-group>
          <div>&nbsp;&nbsp;&nbsp;</div>
        </div>
        <el-checkbox-group v-model="form.proximal_regulation" style="margin-bottom: 20px">
          <el-checkbox label="Proximal regulation" style="font-size: 18px;font-weight: bolder" value="true">
          </el-checkbox>
        </el-checkbox-group>
        <el-form-item>
          <el-button type="success" @click="onSubmit">Submit</el-button>
          <el-button type="danger" @click="ReSet">Reset</el-button>
          <el-button type="primary" @click="Example2">Example1</el-button>
          <el-button type="primary" @click="Example1">Example2</el-button>
        </el-form-item>
      </el-form>

    </el-col>
    <!--    <el-divider direction="vertical" border-style="color: #c4c3c3;font-size: 1px;height:100%"/>-->
    <el-col :span="12">
<!--      <div style="box-shadow: 2px 2px 2px #c4c3c3;background-color: #eeeeee;margin: 5px 0;height: 40px;align-items: center;display: flex;align-content: center">-->
<!--        <div style="font-size: 20px;font-weight: bold;margin: 5px">Schematic diagram of the function</div>-->
<!--      </div>-->
      <div style="text-align: center">
        <img src="../../assets/analysis/analysis2.png" height="513" width="546"/>
      </div>
    </el-col>
  </el-row>
  <el-row justify="space-between" :gutter="20">
    <el-col :span="24">
      <div style="padding-left: 20px">
        <h2 style="">Introduction</h2>
        <p style="text-align: justify;line-height: 25px">
          Distal regulation: In the case of distal regulation, the index SNV is located at one anchor point of a chromatin interaction pair, and the promoter of the target gene resides at the other anchor point.
        </p>
        <p style="text-align: justify;line-height: 25px">
          Proximal regulation: Proximal regulation is characterized by the ASM site situated within the same anchor point as the gene promoter.
        </p>
        <p style="text-align: justify;line-height: 25px">
          Tissue: Select an ASM-associated sample tissue to filter the user-input SNV.
        </p>
      </div>

    </el-col>
  </el-row>
</template>

<script>
import {reactive, toRefs,ref} from "vue";
import {useRouter} from "vue-router";

export default {
  name: "analysis_chromatin_interaction",
  setup(){
    const router = useRouter()
    const form = reactive({
      SNV: ref({
        data: ''
            // 'rs11217076\n' +
            // 'rs2150929\n' +
            // 'rs11217076\n' +
            // 'rs11217076\n' +
            // 'rs11217076\n' +
            // 'rs11022163\n' +
            // 'rs1279643949'
      }),
      chromosomal_regions : {
        data: ''
      },
      tissue: ref(   {value: 'All' ,label: 'All'},),
      distal_regulation:{
        option: ref(['true']),
        distal_regulation: ref(''),
      },
      proximal_regulation: ref(['true']),
    })

    const data = reactive({
      inputselect: ref('0'),
      tissueOptions:[
        {name:'ALL',value:'ALL'},
        {name:'Bladder',value:'Bladder'},
        {name:'Blood',value:'Blood'},
        {name:'Bone marrow',value:'Bone marrow'},
        {name:'Brain',value:'Brain'},
        {name:'Breast',value:'Breast'},
        {name:'Breast  cancer pdx model',value:'Breast  cancer pdx model'},
        {name:'Cartilage',value:'Cartilage'},
        {name:'Cervix',value:'Cervix'},
        {name:'Esophagus',value:'Esophagus'},
        {name:'Gastric',value:'Gastric'},
        {name:'Intestine',value:'Intestine'},
        {name:'Kidney',value:'Kidney'},
        {name:'Liver',value:'Liver'},
        {name:'Lung',value:'Lung'},
        {name:'Lymph  node',value:'Lymph  node'},
        {name:'Nasopharynx',value:'Nasopharynx'},
        {name:'Nipple  aspirate fluid',value:'Nipple  aspirate fluid'},
        {name:'Oral  ',value:'Oral  '},
        {name:'Ovary',value:'Ovary'},
        {name:'Pancreas',value:'Pancreas'},
        {name:'PDX model colorectal cancer ',value:'PDX model colorectal cancer '},
        {name:'PDX of prostate cancer',value:'PDX of prostate cancer'},
        {name:'Peritoneum',value:'Peritoneum'},
        {name:'Plasma',value:'Plasma'},
        {name:'Prostate',value:'Prostate'},
        {name:'Retina',value:'Retina'},
        {name:'Retinal organoids',value:'Retinal organoids'},
        {name:'Skin',value:'Skin'},
        {name:'Thyroid gland',value:'Thyroid gland'},
        {name:'Xenograft cells of acute lymphoblastic leukemia',value:'Xenograft cells of acute lymphoblastic leukemia'}
      ],
    })

    const onSubmit = () => {
      var formJson = form
      formJson['type'] = data.inputselect
      router.push({
        path:"/analysis_chromatin_interaction/detail",
        query:{
          form: JSON.stringify(formJson)
        }
      })
    }
    const Example1 = () => {
      data.inputselect = '1'
      form.chromosomal_regions.data = 'chr11 65239110 65264640\n' +
          'chr19 13947194 13962421\n' +
          'chr19 39888494 39901409\n' +
          'chr1 30649567 30655759\n' +
          'chr1 11345200 11359618\n'
      form.tissue = 'Blood'
      form.proximal_regulation = ['true']
      form.distal_regulation.option = ['true']
    }
    const Example2 = () => {
      data.inputselect = '0'
      form.SNV.data = 'rs1883832'
          // 'rs11217076\n' +
          // 'rs2150929\n' +
          // 'rs11217076\n' +
          // 'rs11217076\n' +
          // 'rs11217076\n' +
          // 'rs11022163\n' +
          // 'rs1279643949'
      form.tissue = 'Lung'
      form.proximal_regulation = ['true']
      form.distal_regulation.option = ['true']
    }
    const ReSet = () => {
      data.inputselect = '1'
      form.SNV.data = ''
      form.chromosomal_regions.data = ''
      form.tissue = {}
      form.proximal_regulation = []
      form.distal_regulation.option = []
    }
    return {
      ...toRefs(data),
      form,
      onSubmit,
      Example1,Example2,ReSet
    }
  }
}
</script>

<style scoped>
::v-deep .el-form-item__label{
  font-size: unset;
}
::v-deep .el-textarea__inner{
  height: 200px;
}
::v-deep .el-radio{
  align-items: flex-start;
  height: auto;
}
::v-deep .el-radio-group{
  align-items: flex-start;
  height: auto;
}
::v-deep .el-form-item__label{
  color: #000000;
}
</style>
